import React, { Component } from 'react';
import '../styles/food_x/food_x.css'
import {get_foods} from '../api'

class Food_x extends Component{
    constructor(){
        super()
        this.state={
            foods_info:[]
        }
    }
    componentDidMount(){
        // console.log(this.props.match.params.fid)
        get_foods(10*this.props.match.params.fid)
        .then(res=>{
            // console.log(res.data)
            this.setState({
                foods_info:res.data
            })
        })
    }
    goback(){
        this.props.history.goBack()
      }
    render(){

        let foods_info=this.state.foods_info
        let newitems
        if(foods_info===false||foods_info===null||foods_info.length===0){
            // console.log("这是个空数组")
            newitems=null
        }else{
            newitems=foods_info.map(val=>{
                let icons=val.supports.map((v)=>{
                        return (
                            <span key={v.id}>
                               {v.icon_name}
                            </span>
                        )
                    })
                    return (
                        <li key={val.id}>
                            <img src={'//elm.cangdu.org/img/'+val.image_path} alt="失踪了"/>
                            <div>
                                    <p>
                                        <i>
                                            <span className="logo_1">品牌</span>
                                            <span className="name_1">{val.name}</span>
                                        </i>
        
                                        <b className="supot_1">
                                         {icons}
                                        </b>
                                    </p>
                                    <p>
                                        <span>
                                            月做{val.recent_order_num}单
                                        </span>
                                        <span className="right_1">
                                            {/* {val.delivery_mode.text} */}
                                        </span>
                                    </p>
                                    <p>
                                        <i>
                                            <span>{val.float_minimum_order_amount}元起送</span>/
                                            <span>配送费约{val.float_delivery_fee}元</span>
                                        </i>
                                        <i className="right_1">
                                            <span>{val.distance}</span>/
                                            <span>{val.order_lead_time}</span>
                                        </i>
                                    </p>
                            </div>
                        </li>
                    )
                })
        }
        return (
            <div className='food_x'>
                <div className='food_head'>
                    {/* <NavLink to="/home/南京"> */}
                        <i className="iconfont icon-fanhui-yuanshijituantubiao" onClick={this.goback.bind(this)}></i>
                    {/* </NavLink> */}
                    <h3>
                        {this.props.match.params.fname}
                    </h3>
                </div>
                <div className='list_box_f'>
                    <h3>占位的</h3>
                    <ul className='food_list'>
                    {newitems}
                    </ul>
                </div>
            </div>
        )
    }
}
export default Food_x